<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui">
	<ui:define name="title">
		<title>#{msg['department']}</title>
		<script>
			$('document').ready(function() {
				$('#department-id').addClass("menu-left-selected");
			});
		</script>
	</ui:define>
	<ui:define name="lcontent">
		<ui:include src="../template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<div class="loading">
			<img
				src="#{facesContext.externalContext.requestContextPath}/resources/images/loading.gif" />
		</div>
		<div class="rcontent-main">
			<div class="department-tree">
				<h:form>
					<f:event type="preRenderView" listener="#{departmentManagement.onload}" />
					<p:tree value="#{departmentManagement.root}" var="node" id="tree"
						selectionMode="single">
						<p:ajax event="select" listener="#{departmentManagement.select}"
							update=":update" onstart="loading()"
							onsuccess="closeLoading()"></p:ajax>
						<p:treeNode id="treeNode" type="document">
							<h:outputText value="#{node.kywd}" id="lblNode" />
						</p:treeNode>
					</p:tree>
				</h:form>
			</div>
			<div class="input-rpanel">
				<h:form id="create">
					<span class="input-table-caption">#{msg['add-new-department']}</span>
					<table class="input-table w100">
						<tr>
							<td class="input-table-first">#{msg['department-name']}<span
								class="required">*</span>
							</td>
							<td><h:inputText styleClass="input"
									value="#{departmentManagement.insertNode.kywd}" /></td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['description']}<span class="required">*</span>
							</td>
							<td><h:inputText styleClass="input"
									value="#{departmentManagement.insertNode.dscptn}" /></td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['parent']}<span
								class="required">*</span>
							</td>
							<td><h:selectOneMenu id="sex" styleClass="input w50"
									value="#{departmentManagement.insertNode.partid}">
									<f:selectItems var="item" itemLabel="#{item.kywd}"
										itemValue="#{item.id}"
										value="#{departmentManagement.selectDepartment1}"></f:selectItems>
								</h:selectOneMenu></td>
						</tr>
					</table>
					<div class="control-button">
						<h:commandLink onclick="loading();" action="#{departmentManagement.insert}">
							<img
								src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/search.png" />
							<span>#{msg['add-new']}</span>
						</h:commandLink>
					</div>
					<span class="clear"/>
				</h:form>
				<br />
				<h:form id="update">
					<h:panelGroup rendered="#{departmentManagement.selectNode.id != 0}">
						<span class="input-table-caption">#{msg['update-department']}</span>
						<table class="input-table w100">
							<tr>
								<td class="input-table-first">#{msg['department-name']}<span
									class="required">*</span>
								</td>
								<td><h:inputText styleClass="input"
										value="#{departmentManagement.selectNode.kywd}" /></td>
							</tr>
							<tr>
								<td class="input-table-first">#{msg['description']} <span class="required">*</span>
								</td>
								<td><h:inputText styleClass="input"
										value="#{departmentManagement.selectNode.dscptn}" /></td>
							</tr>
							<tr>
								<td class="input-table-first">#{msg['parent']}<span
									class="required">*</span>
								</td>
								<td><h:selectOneMenu id="a" styleClass="input w50"
										value="#{departmentManagement.partid}">
										<f:selectItems var="item" itemLabel="#{item.kywd}"
											itemValue="#{item.id}"
											value="#{departmentManagement.selectDepartment2}"></f:selectItems>
									</h:selectOneMenu></td>
							</tr>
						</table>
						<h:panelGroup rendered="#{departmentManagement.selectNode.id != 0}">
							<div class="control-button">
								<h:commandLink onclick="loading();" action="#{departmentManagement.update}"> <img
									src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/search.png" />
									<span>#{msg['update']}</span> </h:commandLink>
							</div>
						</h:panelGroup>
						<h:panelGroup rendered="#{departmentManagement.selectNode.partid != 0}">
							<div class="control-button">
								<a onclick="return openConfirmPopup();">
									<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/trash.png" />
									<span>#{msg['delete']}</span>
								</a>
							</div>
						</h:panelGroup>
						<span class="clear"/>
					</h:panelGroup>
				</h:form>
			</div>
			<span class="clear" />
		</div>
		<h:form>
			<div class="wrap-popup-confirm">
				<div class="popup-confirm">
					<div class="popup-confirm-header">
						#{msg['message']} <img src="image/close.png" onclick="closeConfirmPopup()" />
					</div>
					<div class="popup-confirm-content">
						<span>#{msg['are-you-sure']} ? </span>
						<div class="popup-confirm-content-navigation">
							<h:commandLink styleClass="navigation-button-noicon"
								onclick="loading();" action="#{departmentManagement.delete}">
								<span>#{msg['yes']}</span>
							</h:commandLink>
							<a class="navigation-button-noicon" onclick="closeConfirmPopup()">
								<span>#{msg['no']}</span> </a>
						</div>
					</div>
				</div>
			</div>
		</h:form>
	</ui:define>
</ui:composition>